<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS-DOM</title>
</head>
<body>

  <h1 id="title1">11111</h1>
  <h1>22222</h1>
  <h1 class="cls1">33333</h1>
  <h1 class="cls1">44444</h1>
  <h1 class="cls1">55555</h1>
  <h1>66666</h1>

  <!-- DOM操作之前的数据
       11111
       22222
       33333
       44444
       55555
       66666 -->

  <script>

    // 一。获取一个DOM对象

    //1.获取DOM对象  id为title1的DOM对象
    let title1 = document.querySelector("#title1");
    // 第二步修改内容 将title1的DOM对象中的内容修改为"哈哈哈哈哈"
    title1.innerHTML = "哈哈哈哈哈哈";
    // 修改后变成了
    // 哈哈哈哈哈哈
      // 22222
      // 33333
      // 44444
      // 55555
      // 66666



    // 二。获取所有符合条件的DOM对象 class为cls1的所有DOM对象，以数组形式返回

    // 1.获取所有符合条件的DOM对象
    let array = document.querySelectorAll(".cls1");
    // 2.修改数组中第0个和第2个DOM对象中的内容为"修改修改"
    array[0].innerHTML = "修改修改";
    array[2].innerHTML = "魔改魔改";
    // 修改后变成了
    // 哈哈哈哈哈哈
    // 22222
    // 修改修改
    // 44444
    // 魔改魔改
    // 66666


  </script>
</body>
</html>